<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 张磊
 * @Date: 2020-11-12 11:30:16
 * @LastEditors: 张磊
 * @LastEditTime: 2020-11-12 18:52:48
 * @FilePath: \rank_tree\src\views\Detail\video.vue
-->
<template>
  <div>
    <header>
      <p style="fontsize: 1.6rem" @click="goBack">&lt;</p>
      <p>视频详情</p>
      <p></p>
    </header>
    <video
      ref="videoPlayer"
      controls
      :src="url"
      controlslist="nodownload"
      style="width: 100%; height: 100%; object-fit: fill"
    ></video>
    <ul>
      <li @click="toPlay">
        <i
          :class="['iconfont', state.flag ? 'icon-zanting' : 'icon-bofang']"
        ></i>
      </li>
      <li @click="toBack"><i class="iconfont icon-houtui"></i></li>
      <li @click="toForward"><i class="iconfont icon-qianjin"></i></li>
      <li @click="addVoice"><i class="iconfont icon-volume-plus"></i></li>
      <li @click="decrease"><i class="iconfont icon-volume-less"></i></li>
    </ul>
  </div>
</template>
<script>
import { defineComponent, computed, reactive } from "vue";
// import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
export default defineComponent({
  setup() {
    let state = reactive({
     
      flag: false,
    });
    function toPlay() {
        state.flag = this.$refs.videoPlayer.paused;
      this.$refs.videoPlayer.paused === true
        ? this.$refs.videoPlayer.play()
        : this.$refs.videoPlayer.pause();
    }
    function toForward() {
      var time = 10; //单位秒，每次增减10秒
      this.$refs.videoPlayer.volume !== this.$refs.videoPlayer.duration
        ? (this.$refs.videoPlayer.currentTime += time)
        : 1;
    }
    function toBack() {
      var time = 10;
      console.log("后退");
      this.$refs.videoPlayer.currentTime !== 0
        ? (this.$refs.videoPlayer.currentTime -= time)
        : 1;
    }
    function addVoice() {
      var vol = 0.1;
      console.log("增加音量");
      this.$refs.videoPlayer.volume !== 1
        ? (this.$refs.videoPlayer.volume += vol)
        : 1;
    }
    function decrease() {
      var vol = 0.1;
      console.log("减小音量");
      this.$refs.videoPlayer.volume !== 0
        ? (this.$refs.videoPlayer.volume -= vol)
        : 1;
    }
    let Router = useRouter();
    let Route = useRoute();
    function goBack() {
      Router.go(-1);
    }
    return {
      toPlay,
      toForward,
      toBack,
      decrease,
      addVoice,
      goBack,
      state,
      url: computed(() => Route.params.url),
      flag: false,
    };
  },
});
</script>
<style lang="scss" scoped>
header {
  width: 100%;
  height: 2.4rem;
  display: flex;
  padding: 1.2rem;
  justify-content: space-between;
  align-items: center;
}
ul {
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
  li {
    i {
      font-size: 2rem;
    }
  }
}
</style>